<template>
    <div>
        <div class="card" style="margin-bottom: 5px;">
            <el-input placeholder="请输入名称查询" v-model="data.name" style=" width: 240px;margin-right: 10px;"
                prefix-icon="Search">
            </el-input>
            <el-button type="primary" @click="">查 询</el-button>
            <el-button type="warning" @click="">重 置</el-button>
        </div>
        <div class="card" style="margin-bottom: 5px;">
            <el-button type="primary" @click="">新 增</el-button>
            <el-button type="warning" @click="">删 除</el-button>
            <el-button type="success" @click="">导 入</el-button>
            <el-button type="info" @click="">导 出</el-button>
        </div>
        <div class="card" style="margin-bottom: 5px;">
            <el-table :data="data.tableData" stripe>
                <el-table-column prop="date" label="日期" />
                <el-table-column prop="name" label="名称"/>
                <el-table-column prop="address" label="地址"/>
                
            </el-table>
            <div style="margin-top: 15px;" >
            <el-pagination
                v-model:current-page="data.pageNum"
                v-model:page-size="data.pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 15, 20]"
                :total="data.total"
            />

            </div>


        </div>
    </div>

</template>

<script setup>
import { reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'

const data = reactive({
    name: "",
    tableData: [
        {date: '2016-05-02', name: '小明', address: '上海市普陀区金沙江路 1518 弄'},
        {date: '2016-05-04', name: '赵凯', address: '上海市普陀区金沙江路 1517 弄'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
    ],
    pageNum: 1,
    pageSize: 10,
    total: 47,

})

</script>
<style scoped>

</style>